<template>
  <div class="screen-box">
    <div class="screen-head">
      <div class="floor-name">{{ numFloor }}号楼公寓</div>
      <div class="icon-box">
        <div class="icon-li">
          <img src="../../assets/images/pingzhengicon.png" alt="" />
          <span>正分</span>
        </div>
        <div class="icon-li">
          <img src="../../assets/images/pingfuicon.png" alt="" />
          <span>负分</span>
        </div>
        <div class="icon-li">
          <img src="../../assets/images/xianzhiicon.png" alt="" />
          <span>闲置</span>
        </div>
      </div>
    </div>
    <div class="floor-box">
      <div class="floor-num">
        <div v-for="item in storeyList" :key="item.id" class="floor-li">
          <Progress type="circle" :percent="item.num" :format="percent => `${item.name}`" />
        </div>
      </div>
      <div class="room-box">
        <div class="boxs">
          <div
            v-for="(item, index) in roomList"
            :key="item.id"
            class="room-li"
            :class="[
              { 'no-rig': (index + 1) % 5 === 0 },
              { 'no-li': item.markScoreType * 1 === 3 },
              item.markScoreType * 1 === 1 ? 'bg-green' : 'bg-red'
            ]"
          >
            <span class="room-name"> {{ item.roomName }} </span>
            <span v-if="item.markScoreType * 1 === 3" class="no-room">闲置</span>
            <span v-else class="room-num" :class="item.markScoreType * 1 === 1 ? 'green' : 'red'">
              {{ item.markScoreType * 1 === 1 ? '+' : null }}{{ item.totalMarkScore }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { bigScreen } from '@/api/user';
import { Progress } from 'ant-design-vue';
import { useRoute } from 'vue-router';
const route = useRoute();
let storeyData = ref({
  one: [], // 存储的1楼数据
  two: [], // 存储的2楼数据
  three: [], // 存储的3楼数据
  four: [], // 存储的4楼数据
  five: [], // 存储的5楼数据
  six: [] // 存储的6楼数据
}); // 存储值
const ratio = ref(1);
const numFloor = ref(''); // 宿舍楼（栋）
const storeyList = ref([
  {
    name: '1楼',
    num: 100
  },
  {
    name: '2楼',
    num: 0
  },
  {
    name: '3楼',
    num: 0
  },
  {
    name: '4楼',
    num: 0
  },
  {
    name: '5楼',
    num: 0
  },
  {
    name: '6楼',
    num: 0
  }
]);
onMounted(() => {
  ratio.value = window.devicePixelRatio || 1;
  console.log('比例', ratio.value);
  console.log('路由', route.query);
  const bodyWidth = document.body.clientWidth;
  const bodyHeight = document.body.clientHeight;

  console.log('Body Width:', bodyWidth);
  console.log('Body Height:', bodyHeight);

  sessionStorage.setItem('storeyData', JSON.stringify(storeyData.value));
  // getFloor(); // 根据id 转换对应的楼栋
  // decreaseNum(); // 进度条10秒钟从100变为0
  getInit(); // 初始化数据
  // startTimer(); // 定时器
});

function decreaseNum() {
  setTimeout(() => {
    // console.log(storeyList.value[storey.value - 1].num);
    if (storeyList.value[storey.value - 1].num * 1 === 0) {
      if (storey.value * 1 === 1) {
        storeyList.value[0].num = 100;
        storeyList.value[5].num = 0;
      } else {
        storeyList.value[storey.value - 2].num = 0;
        storeyList.value[storey.value - 1].num = 100;
      }
    } else {
      storeyList.value[storey.value - 1].num -= 1;
    }
    decreaseNum(storey.value - 1 + 1);
  }, 100);
}

const getFloor = () => {
  switch (route.query.id) {
    case '533571793663832064':
      numFloor.value = '一';
      break;
    case '533571868003676160':
      numFloor.value = '二';
      break;
    case '533571930465251328':
      numFloor.value = '三';
      break;
    case '533571985117032448':
      numFloor.value = '四';
      break;
    case '55':
      numFloor.value = '五';
      break;
    case '66':
      numFloor.value = '六';
      break;
    default:
      numFloor.value = '一';
  }
};
// 存储数据
const saveData = data => {
  switch (storey.value) {
    case 1:
      storeyData.value.one = data;
      break;
    case 2:
      storeyData.value.two = data;
      break;
    case 3:
      storeyData.value.three = data;
      break;
    case 4:
      storeyData.value.four = data;
      break;
    case 5:
      storeyData.value.five = data;
      break;
    case 6:
      storeyData.value.six = data;
      break;
    default:
      storeyData.value.one = data;
  }
  sessionStorage.setItem('storeyData', JSON.stringify(storeyData.value));
};
// 获取缓存数据
const getStoreyData = () => {
  let data = JSON.parse(sessionStorage.getItem('storeyData'));
  // console.log('缓存数据', data);
  // console.log(storey.value);
  switch (storey.value * 1) {
    case 1:
      roomList.value = data.one;
      break;
    case 2:
      roomList.value = data.two;
      break;
    case 3:
      roomList.value = data.three;
      break;
    case 4:
      roomList.value = data.four;
      break;
    case 5:
      roomList.value = data.five;
      break;
    case 6:
      roomList.value = data.six;
      break;
    default:
      roomList.value = data.one;
  }
};
const storey = ref(1); // 楼层1-6
const roomList = ref([]); // 房间数据
const getInit = () => {
  const params = {
    dormitoryId: route.query.id, // 宿舍楼ID
    startTime: route.query.startTime, // 开始时间
    storey: storey.value // 楼层
  };
  bigScreen(params)
    .then(res => {
      if (res.data.code * 1 === 200) {
        let data = res.data.data.roomList.slice(0, 40);
        roomList.value = data;
        // numFloor.value = res.data.data.dormitoryName;
        saveData(data);
      } else {
        getStoreyData();
      }
    })
    .catch(err => {
      console.log(333, err);
      getStoreyData();
    });
};
const startTimer = () => {
  setInterval(() => {
    if (storey.value * 1 === 6) {
      storey.value = 1;
    } else {
      storey.value++;
    }
    getInit();
  }, 10000);
};
</script>
<style lang="less" scoped>
.screen-box {
  width: calc(1920px / v-bind(ratio));
  // width: 1120px;
  padding: calc(34px / v-bind(ratio)) calc(32px / v-bind(ratio)) calc(32px / v-bind(ratio))
    calc(32px / v-bind(ratio));
  height: calc(1080px / v-bind(ratio));
  background: url('../../assets/images/beijing.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  .screen-head {
    margin-bottom: calc(46px / v-bind(ratio));
    padding-left: calc(102px / v-bind(ratio));
    display: flex;
    justify-content: space-between;
    .floor-name {
      font-size: calc(48px / v-bind(ratio));
      font-family: YEFONTAoYeHei, YEFONTAoYeHei-400;
      font-weight: 400;
      color: #ffffff;
      align-items: flex-start;
    }
    .test-name {
      width: calc(42px / v-bind(ratio));
      height: calc(42px / v-bind(ratio));
    }
  }
  .floor-box {
    display: flex;
    align-items: center;
    .room-box {
      width: 100%;
      height: calc(880px / v-bind(ratio));
      .boxs {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        // justify-content: space-between;
      }
      .no-rig {
        margin-right: 0 !important;
      }
      .room-li {
        padding: calc(23px / v-bind(ratio)) calc(26px / v-bind(ratio));
        width: calc(338px / v-bind(ratio));
        height: calc(96px / v-bind(ratio));
        margin-right: calc(16px / v-bind(ratio));
        border-radius: calc(8px / v-bind(ratio));
        margin-bottom: calc(16px / v-bind(ratio));
        display: flex;
        justify-content: space-between;
        align-items: center;
        .room-num {
          font-size: calc(32px / v-bind(ratio));
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
        }
        .no-room {
          font-size: calc(32px / v-bind(ratio));
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.45);
        }
        .green {
          color: #30cb82;
        }
        .red {
          color: #f44a29;
        }
        .room-name {
          // width: 79px;
          height: calc(50px / v-bind(ratio));
          font-size: calc(36px / v-bind(ratio));
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
          text-align: LEFT;
          color: #000000;
        }
      }
      .no-li {
        background: #dddddd !important;
      }
      .bg-green {
        background: #e0fff7;
      }
      .bg-red {
        background: #ffd4cb;
      }
    }
    .floor-num {
      margin-right: calc(32px / v-bind(ratio));
      .floor-li {
        margin-bottom: calc(16px / v-bind(ratio));
        /deep/
          .micro-ant-progress-inner:not(.micro-ant-progress-circle-gradient)
          .micro-ant-progress-circle-path {
          stroke: #548dff !important;
        }
        /deep/
          .assessment-center-progress-inner:not(.assessment-center-progress-circle-gradient)
          .assessment-center-progress-circle-path {
          stroke: #548dff !important;
        }
        /deep/
          .micro-ant-progress-status-success
          .micro-ant-progress-inner:not(.micro-ant-progress-circle-gradient)
          .micro-ant-progress-circle-path {
          stroke: #548dff !important;
        }
        /deep/ .assessment-center-progress-text {
          font-size: calc(24px / v-bind(ratio));
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
          color: #004ce3;
        }
        /deep/ .micro-ant-progress-text {
          font-size: calc(24px / v-bind(ratio));
          font-family: PingFang SC, PingFang SC-600;
          font-weight: 600;
          color: #004ce3;
        }
        /deep/ .micro-ant-progress-inner {
          width: calc(70px / v-bind(ratio)) !important;
          height: calc(70px / v-bind(ratio)) !important;
          svg {
            background: #c5dcff !important;
          }
        }
        /deep/ .assessment-center-progress-inner {
          width: calc(70px / v-bind(ratio)) !important;
          height: calc(70px / v-bind(ratio)) !important;
          svg {
            background: #c5dcff !important;
          }
        }
      }
    }
  }
  .icon-box {
    display: flex;
    align-items: flex-end;
    margin-top: calc(40px / v-bind(ratio));
    .icon-li {
      display: flex;
      align-items: center;
    }
    img {
      width: calc(42px / v-bind(ratio));
      height: calc(42px / v-bind(ratio));
      margin: 0 calc(6px / v-bind(ratio)) 0 calc(24px / v-bind(ratio));
    }
    span {
      font-size: calc(24px / v-bind(ratio));
      font-family: PingFang SC, PingFang SC-600;
      font-weight: calc(600 / v-bind(ratio));
      color: #ffffff;
    }
  }
}
</style>
